<template>
	<view :style="$theme.pageStyle">
		<form @submit="submitSub">
			<view class="paymentCon">
				<view class="payment-top">
					<span class="name">我的余额</span>
					<view class="money">{{ User.user_money || 0 }}</view>
					<view class="pictrue">
						<image src="https://jiangxinsaas.oss-cn-beijing.aliyuncs.com/tuchuang/411713613661Myh5jf.png">
						</image>
					</view>
				</view>
			</view>
			<view class="payment">
				<view class="nav acea-row row-between-wrapper">
					<view class="item on on1">
						买单金额
					</view>
				</view>
				<view class='tip picList'>
					<view class="pic-box pic-box-color acea-row row-center-wrapper row-column"
						:class="activePic == index ? 'pic-box-color-active' : ''" v-for="(item, index) in picList"
						:key="index" @click="picCharge(index, item)">
						<view>
							<view class="pic-number-pic">¥<text class="money">{{ item.price }}</text></view>
							<!-- <view class="label">充值福利</view> -->
						</view>
					</view>
					<view class="pic-box pic-box-color acea-row row-center-wrapper"
						:class="activePic == picList.length ? 'pic-box-color-active' : ''"
						@click="picCharge(picList.length)">
						<input type="digit" :placeholder="activePic == picList.length?'':'自定义'" v-model="money"
							class="pic-box-money" placeholder-class="placeholders" />
					</view>
				</view>
				<view class="tips-box">
					<view class="tips">买单说明</view>
					<view class="tips-samll acea-row row-top row-between">
						<view class="drop"></view>
						<view class="info">买单后直接联系客服！</view>
					</view>
				</view>
				<button class='but bg-color' formType="submit"> 立即买单 </button>
			</view>
		</form>
	</view>
</template>

<script>
	import $H from '@/common/js/request.js'
	export default {
		data() {
			return {
				User: {},
				yiYan: {},
				money: '',
				min_amount: uni.getStorageSync('min_amount'),
				activePic: 0,
				active: 0,
				numberPic:'',
				picList: [
					{
						id: 1,
						price: 500,
					},
					{
						id: 2,
						price: 300
					},
					{
						id: 3,
						price: 200
					},
					{
						id: 4,
						price: 100
					}
				],

			}
		},
		onLoad() {
			this.getuser()
		},
		onShow() {
			this.rechar_id = this.picList[0].id;
			this.numberPic = this.picList[0].price;
		},
		components: {

		},
		methods: {
			getuser() {
				$H.post('user/center', {
			
				}, {
					token: true
				}).then(res => {
					if (res.code == 1) {
						this.User = res.data
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
			// showToast() {
			// 	uni.showToast({
			// 		title: '请先输入充值金额',
			// 		icon: 'none'
			// 	})
			// },
			picCharge(idx, item) {
				this.activePic = idx;
				if (item === undefined) {
					this.rechar_id = 0;
					this.numberPic = "";
				} else {
					this.money = "";
					this.rechar_id = item.id;
					this.numberPic = item.price;
				}
			},
			getYiyan() {

			},
			notify(e) {
				this.money = e;
			},
			submitSub() {

				$H.post('order/recharge', {
					money: this.numberPic ? this.numberPic : this.money,
					pay_way: 2,
				}, {
					token: true
				}).then(res => {
					if (res.code == 1) {
						uni.requestPayment({
							provider: 'wxpay',
							appId: res.data.config.appId,
							timeStamp: res.data.config.timeStamp,
							nonceStr: res.data.config.nonceStr,
							package: res.data.config.package,
							signType: res.data.config.signType,
							paySign: res.data.config.paySign,
							success: function(res) {
								//跳转到会话页面
								return setTimeout(() => {
									uni.navigateTo({
										url: '/pages/center/money/balance'
									})
								}, 400)
							},
							fail: function(err) {
								uni.showToast({
									title: '支付失败',
									duration: 2000
								});
							}
						})
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						});
					}

				})


			}
		}
	}
</script>

<style lang="scss">
	.bgcolor {
		background-color: var(--color-primary)
	}

	.accountTitle {
		background-color: rgba(255, 68, 143, 0.1);
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		z-index: 99;

		.sysTitle {
			width: 100%;
			position: relative;
			font-weight: 500;
			color: #333333;
			font-size: 30rpx;

			.iconfont {
				position: absolute;
				font-size: 36rpx;
				left: 11rpx;
				width: 60rpx;
			}
		}
	}

	.payment {
		position: relative;
		width: 710rpx;
		background-color: #fff;
		border-radius: 32rpx;
		margin: -176rpx auto 0 auto;
		padding-bottom: 64rpx;
	}

	.payment .nav {
		height: 96rpx;
		line-height: 96rpx;
		background-color: #f5f5f5;
		border-radius: 32rpx 32rpx 0 0;
	}

	.payment .nav .item {
		font-size: 30rpx;
		color: #333;
		width: 280rpx;
		text-align: center;
		padding-right: 40rpx;
		position: relative;

		&.on1 {
			padding-right: 62rpx;
			background-image: url('https://jiangxinsaas.oss-cn-beijing.aliyuncs.com/tuchuang/5217136138521erxnI.png');

			&::after {
				margin-left: 150rpx;
			}
		}

		&.on3 {
			padding-left: 62rpx;
		}
	}

	.payment .nav .item.on {
		font-weight: bold;
		width: 407rpx;
		height: 96rpx;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		text-align: center;

		&::after {
			width: 38rpx;
			height: 30rpx;
			border: 2px solid var(--color-primary);
			border-left: 2px solid transparent !important;
			border-top: 2px solid transparent !important;
			border-right: 2px solid transparent !important;
			border-radius: 50%;
			position: absolute;
			content: ' ';
			left: 0;
			bottom: 10rpx;
		}
	}

	.payment .input {
		margin: 32rpx auto 0 auto;
		font-size: 56rpx;
		color: #333333;
		background: #F5F5F5;
		border-radius: 16rpx;
		height: 114rpx;
	}

	.payment .input text {
		padding-left: 26rpx;
		font-weight: 600;
	}

	.payment .input input {
		width: 520rpx;
		height: 94rpx;
		font-size: 60rpx;
		margin-left: 24rpx;
		font-family: 'SemiBold';
	}

	.payment .input .placeholder {
		font-weight: 400;
		color: #DDDDDD;
		height: 100%;
		line-height: 94rpx;
		font-size: 32rpx;
	}

	.payment .tip {
		font-size: 26rpx;
		color: #888888;
		padding: 0 33rpx;
		margin-top: 36rpx;

		.title {
			font-weight: 400;
			color: #333333;
			font-size: 28rpx;
		}
	}

	.payment .but {
		color: #fff;
		font-size: 28rpx;
		width: 646rpx;
		height: 88rpx;
		border-radius: 50rpx;
		margin: 150rpx auto 0 auto;
		line-height: 88rpx;
		font-weight: 500;
		background: linear-gradient(90deg,var(--color-primary) 0%, var(--color-primary-light-3) 100%);
	}

	.paymentCon {
		background: linear-gradient(180deg, #FFE8E5 0%, #f5f5f5 100%);
		padding-top: 32rpx;
	}

	.payment-top {
		width: 710rpx;
		height: 396rpx;
		background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-light-3) 100%);
		margin: 0 auto;
		border-radius: 32rpx 32rpx 0 0;
		padding: 56rpx 60rpx;
		box-sizing: border-box;
		position: relative;

		.name {
			font-size: 28rpx;
			color: rgba(255, 255, 255, 0.8);
		}

		.money {
			font-size: 68rpx;
			color: #fff;
			font-family: 'SemiBold';
			margin-top: 16rpx;
		}

		.pictrue {
			width: 186rpx;
			height: 186rpx;
			position: absolute;
			right: 60rpx;
			top: 66rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.picList {
		display: flex;
		flex-wrap: wrap;
		margin: 30rpx 0;

		.pic-box {
			width: 204rpx;
			height: 144rpx;
			border-radius: 20rpx;
			padding: 28rpx 0 26rpx 0;
			margin: 16rpx 16rpx 0 0;
			box-sizing: border-box;
			position: relative;

			&:nth-child(3n) {
				margin-right: 0;
			}

			.label {
				position: absolute;
				left: -2rpx;
				top: -18rpx;
				width: 118rpx;
				height: 40rpx;
				background: linear-gradient(270deg, #FAAD14 0%, #FF7D00 100%);
				border-radius: 16rpx 0 16rpx 0;
				color: #fff;
				font-size: 22rpx;
				text-align: center;
				line-height: 40rpx;
			}
		}

		.pic-box-color {
			background-color: #F5F5F5;
			color: #333;
			border: 1px solid #F5F5F5;
		}

		.pic-number {
			font-size: 24rpx;
			font-weight: 400;
			color: #999999;
			margin-top: 6rpx;
		}

		.pic-number-pic {
			font-size: 36rpx;
			font-weight: 500;
			width: 100%;
			text-align: center;

			.money {
				margin-left: 10rpx;
			}
		}

		.pic-box-money {
			height: 70rpx;
			font-size: 32rpx;
			text-align: center;
			font-weight: 500;
			line-height: 70rpx;
		}

		.placeholders {
			color: #333333;
		}

		.pic-box-color-active {
			background-color: var(--color-primary-light-9) !important;
			color: var(--color-primary) !important;
			border: 1px solid var(--color-primary);
			.pic-number,
			.placeholders {
				color: var(--color-primary) !important;
			}
		}
	}

	.tips-box {
		margin-top: 48rpx;
		width: 100%;
		padding: 0 32rpx;
		box-sizing: border-box;

		.tips {
			font-size: 32rpx;
			color: #333333;
			font-weight: 600;
			margin-bottom: 24rpx;
		}

		.tips-samll {
			font-size: 24rpx;
			color: #999;
			margin-bottom: 20rpx;

			.drop {
				width: 10rpx;
				height: 10rpx;
				background-color: var(--color-primary);
				border-radius: 50%;
				margin-top: 12rpx;
			}

			.info {
				width: 620rpx;
			}
		}

		.tip-box {
			margin-top: 30rpx;
		}
	}

	.tips-title {
		margin-top: 32rpx;
		font-size: 26rpx;
		color: #333;
	}
	
	.acea-row.row-between {
	    justify-content: space-between;
	}

	.acea-row.row-top {
	    align-items: flex-start;
	}
	

	.acea-row {
	    display: flex;
	    flex-wrap: wrap;
	}
	
	
	.acea-row.row-center-wrapper {
	    align-items: center;
	    justify-content: center;
	}
	

	.acea-row.row-column {
	    flex-direction: column;
	}

	
</style>